<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
<style>
    body{
        margin: 0;
    }
    .big{
        width: 300px;
        height: 300px;
        margin: 100px 200px;
        /*border: 1px solid blue;*/
    }
    .big img{
         width: 300px;
        height: 300px;
    }
    .small-first{
        width: 100px;
        height: 300px;
        position: relative;
        left: 500px;
        top:-400px;
        display: flex;
        flex-wrap: wrap;
        /*border: 1px solid green;*/
    }
    .small-first img{
        width: 100px;
        height: 100px;
    }
    .small-second{
         width: 400px;
        height: 200px;
        position: relative;
        left: 200px;
        top:-400px;
        display: flex;
        flex-wrap: wrap;
        /*border: 1px solid green;*/
    }
    .small-second img{
        width: 100px;
        height: 100px;
    }
    
</style>
</head>
<body>
   <div class="big">
       <img src="big_1.jpg" alt="">
   </div>
   <div class="container">
   <div class="small-first">
       <img src="small_1.jpg" alt="">
       <img src="small_2.jpg" alt="">
       <img src="small_3.jpg" alt="">
    
   </div>
   <div class="small-second">
        <img src="small_4.jpg" alt="">
       <img src="small_5.jpg" alt="">
       <img src="small_6.jpg" alt="">
       <img src="small_7.jpg" alt="">
       <img src="small_8.jpg" alt="">
       <img src="small_9.jpg" alt="">
       <img src="small_10.jpg" alt="">
       <img src="small_11.jpg" alt="">
      
   </div>
   </div>
</body>
</html>
<script>
       var imgs=document.querySelectorAll('.container img');
       var firstImg=document.querySelector('.big img')
       for(var i=0;i<imgs.length;i++){
           imgs[i].index=i + 1;
           imgs[i].onmouseover=function(){
             firstImg.src= 'big_'+this.index+'.jpg';
           }

       }
</script>